.visual {
    width: 100vw;
    min-height: 100vh;
    background: url("@/images/bg.jpg") no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    color: #fff;
    font-size: 0.67rem;
  }
  /* 整体布局 */
  .layout {
    min-width: 42.67rem;
    max-width: 80rem;
    min-height: 32.5rem;
    margin: 0 auto;
    background-image: url("@/images/logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    padding: 3.67rem 0.83rem 0;
    display: flex;
  }
  .cloumn {
    flex: 1;
    /* background-color: #f00; */
  }
  .cloumn:nth-child(2) {
    flex: 2;
    margin: 1.333333rem 0.833333rem 0;
  }
  
  .borderimage {
    border: 0.04rem solid;
    border-image-source: url("@/images/border.png");
    /* 上  右  下  左 */
    /* 上   左右   下 */
    /* 上下   左右 */
    /* 四周一样 */
    border-image-slice: 55 42 26 138;
    border-image-width: 2.291667rem 1.75rem 1.083333rem 5.75rem;
    /* padding: 0.416667rem; */
    box-sizing: border-box;
    margin-bottom: 0.42rem;
  }
  .icon-dot {
    margin-top: 0.08rem;
  }
  .title {
    height: 1.88rem;
    line-height: 1.88rem;
    background-image: linear-gradient(to right, #2743ce, #002773, #030b646c);
    padding-left: 0.83rem;
    z-index: 99;
  }
  /* 左侧 */
  /* 市区设备运行情况 */
  .townBaseinfo {
    height: 40.67rem;
  }
  .townBaseinfo .content {
    /* display: flex; */
    /* align-items: center; */
    padding: 0.42rem 0.83rem;
  }
  .townBaseinfo .content li {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
  }
  .townBaseinfo .content li:first-child {
    font-size: 0.83rem;
  }
  .townBaseinfo .content > li div:first-child {
    width: 26%;
  }
  .townBaseinfo .content > li div:nth-of-type(n + 2) {
    width: 24%;
    text-align: center;
  }
  .townBaseinfo .content > li:nth-of-type(n + 2) div:nth-of-type(n + 2) {
    font-size: 1.08rem;
    color: #00a8ff;
  }
  /* 二级 左边第一个盒子 镇设备运行情况 */
  .lFirstBox {
    height: 10.83rem;
  }
  
  .lFirstBox ul {
    padding: 0.42rem 1rem;
  }
  
  .lFirstBox li {
    display: flex;
    align-items: center;
    margin-bottom: 0.42rem;
    font-size: 0.5rem;
    opacity: 0.8;
  }
  
  .lFirstBox li > div {
    display: flex;
    align-items: center;
    width: 36%;
  }
  
  .lFirstBox li > div:first-child {
    width: 22%;
    font-size: 1rem;
    color: #00dc50;
    margin-right: 0.58rem;
  }
  .lFirstBox li > div:nth-child(2) {
  }
  .lFirstBox li > div:nth-child(3) {
    margin-left: 0.42rem;
  }
  .lFirstBox li:nth-child(2) > div:first-child {
    color: #fea500;
  }
  
  .lFirstBox li:nth-child(3) > div:first-child {
    color: rgb(223, 20, 223);
  }
  .lFirstBox li span {
    color: #3bdbfe;
    font-size: 1.67rem;
    margin-left: 0.21rem;
  }
  /* 二级 左边第二个盒子 设备详情 */
  .lSecondBox {
    height: 15.42rem;
  }
  .lSecondBox .faultInfo .content {
    padding: 0.42rem 1.08rem;
  }
  .lSecondBox .faultInfo .content > p {
    margin-bottom: 0.17rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .lSecondBox .faultInfo .content > p > span {
    color: #00a8ff;
  }
  
  /* 二级 左边第三个盒子 设备故障统计 */
  .lthirdlyBox {
    height: 13.58rem;
  }
  .lthirdlyBox .faultStat .content {
    padding: 0.67rem 1.08rem;
    font-size: 1.5rem;
  }
  .lthirdlyBox .faultStat .content .data,
  .lthirdlyBox .faultStat .content .state {
    display: flex;
  }
  .lthirdlyBox .faultStat .content .data .bigBox > div > :last-child {
    color: #00a8ff;
  }
  .lthirdlyBox .faultStat .content .data .center {
    color: #fe0000;
  }
  .lthirdlyBox .faultStat .content .data .right {
    color: #00ff4c;
  }
  .lthirdlyBox .faultStat .content .left,
  .lthirdlyBox .faultStat .content .center,
  .lthirdlyBox .faultStat .content .right {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .lthirdlyBox .faultStat .content .left .bigBox {
    margin-bottom: 0.42rem;
  }
  .lthirdlyBox .faultStat .content .left .bigBox > div {
    display: flex;
    align-items: center;
  }
  .lthirdlyBox .faultStat .content .left .bigBox > div > div:first-child {
    margin-right: 0.83rem;
    font-size: 0.5rem;
  }
  .lthirdlyBox .faultStat .content .left .first {
    margin-right: 0.83rem;
  }
  .lthirdlyBox .faultStat .content .left .first div {
    margin-bottom: 0.75rem;
  }
  .lthirdlyBox .faultStat .content .center {
    flex: 1;
  }
  .lthirdlyBox .faultStat .content .right {
    flex: 1;
  }
  .lthirdlyBox .faultStat .content .left .bgcColor,
  .lthirdlyBox .faultStat .content .center .bgcColor,
  .lthirdlyBox .faultStat .content .right .bgcColor {
    width: 100%;
    height: 0.92rem;
    margin-bottom: 0.33rem;
    background-color: #00a8ff;
  }
  .lthirdlyBox .faultStat .content .center .bgcColor {
    background-color: #fe0000;
  }
  .lthirdlyBox .faultStat .content .right .bgcColor {
    background-color: #00ff4c;
  }
  
  .lthirdlyBox .faultStat .left .box {
    display: flex;
  }
  
  /* ----------- */
  
  /* 中间 */
  .cenTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.67rem;
    margin-top: 0.83rem;
    color: #f2f3f7;
  }
  .cenTitle span {
    font-size: 1.67rem;
    margin-top: 2.08rem;
    color: #f2f3f7;
    margin: 0 1.67rem;
  }
  .cenTitle div {
    width: 3.75rem;
    height: 0.13rem;
    background-image: linear-gradient(to right, #47defd, #406eb2ce, #030b646c);
  }
  .cenTitle div:last-child {
    background-image: linear-gradient(to right, #030b646c, #406eb2ce, #47defd);
  }
  .cen > ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 0.83rem;
  }
  .cen > ul li {
    display: flex;
    align-items: center;
  }
  .cen > ul li span {
    font-size: 2.08rem;
    color: #3bdbfe;
    margin-left: 0.42rem;
  }
  .cen #firstBox {
    height: 32.33rem;
    width: 100%;
    background-color: #0e358998;
  }
  .cen > #secondBox {
    width: 100%;
    height: 32.33rem;
    position: relative;
  }
  
  /* 中间第三层 */
  .cen #thirdlyBox {
    position: relative;
    height: 32.33rem;
    width: 100%;
    background-color: #0e358998;
  }
  .cen #thirdlyBox #three_map {
    position: relative;
    /* background-image: url(@/images/map.jpg); */
  }
  /* .cen #thirdlyBox #three_map .map_tap {
    position: absolute;
    width: 0.83rem;
    height: 2.08rem;
    top: 57%;
    left: 57%;
    background-color: red;
  } */
  .cen #thirdlyBox #three_map .mask {
    background: #000;
    opacity: 0.5;
  }
  /* 分布图 */
  /* .cen .streetMap {
    width: 100%;
    height: 32.33rem;
  } */
  
  /* 右侧 */
  
  /* 报警信息 */
  .alarmInfo {
    height: 25.25rem;
  }
  
  .alarmInfo .list {
    height: 23.38rem;
    overflow: hidden;
  }
  
  .alarmInfo .list ul {
    width: 100%;
    /* animation-name:指定动画的名称
      animation-duration:动画的完成时间，以秒为做单位 ，如果没有设置则默认为0，动画不会有效果
      animation-interation-count:动画的执行的次数，默认为1，如果需要无限循环，设置为infinite
      animation-delay:动画的延迟，默认为0
      animation-timing-function:动画的速度曲线，如 linear:匀速
      animation-direction:动画方向，如果设置来回：alternate
      animation-play-state:动画播放的状态，play  paused
      */
    /* animation: move 1000s linear infinite; */
    padding: 0.42rem;
    padding-right: 0.83rem;
    padding-left: 0;
  }
  .alarmInfo .list > ul {
    position: relative !important;
  }
  .alarmInfo .list > ul .noData {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.67rem;
    color: #00dc50;
  }
  /* 创建一个动画 */
  @keyframes move {
    from {
    }
    to {
      /* 往上移动50% */
      transform: translateY(-50%);
    }
  }
  /* 鼠标上移，停止动画 */
  .alarmInfo .list ul:hover {
    animation-play-state: paused;
  }
  
  .alarmInfo .list > ul > li {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 0.58rem;
    opacity: 0.8;
    margin-bottom: 0.67rem;
    padding-left: 0.67rem;
  }
  
  .alarmInfo .list > ul > li > .num {
    display: flex;
    align-items: center;
    width: 10%;
  }
  .alarmInfo .list > ul > li > div:last-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  
  .alarmInfo .list > ul > li > div:last-child > div:first-child {
    margin-bottom: 0.25rem;
  }
  .alarmInfo .list > ul > li > div:last-child > div:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .alarmInfo .icon-dot {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    opacity: 0;
  }
  .alarmInfo li:hover .icon-dot {
    opacity: 1;
    color: #3bdbfe;
  }
  .alarmInfo li:hover {
    color: #3bdbfe;
  }
  /* 点击弹出的信息 */
  
  /* 视频监控 */
  .rSecondBox {
    height: 15rem;
  }
  .monitoring {
    height: 100%;
  }
  .monitoring .content {
    height: 13.13rem;
  }
  /* 充电占比 */
  .rechargeAnswer {
    height: 100%;
  }
  
  .rechargeAnswer .content {
    height: 13.13rem;
  }
  
  .rechargeAnswer .content #answerPicture {
    height: 70%;
    margin-bottom: 0.83rem;
  }
  
  .rechargeAnswer .content .answerBox {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 1rem;
    line-height: 1.25rem;
    padding: 0 1.67rem;
  }
  .rechargeAnswer .content .answerBox > div {
    text-align: center;
    height: 100%;
    background-color: #00dc50;
    color: #00dc50;
    white-space: nowrap;
  }
  
  .rechargeAnswer .content .answerBox > div:nth-child(2) {
    background-color: orange;
    color: orange;
  }
  .rechargeAnswer .content .answerBox > div:nth-child(1) {
  }
  .rechargeAnswer .content .answerBox > div:nth-child(1) > span {
    position: absolute;
    top: -1.33rem;
    left: 0;
  }
  .rechargeAnswer .content .answerBox > div:nth-child(3) > span {
    position: absolute;
    top: -1.33rem;
    right: 0;
  }
  .rechargeAnswer .content .answerBox > div:nth-child(3) {
    background-color: #40a2e5;
    color: #40a2e5;
  }
  .rechargeAnswer .content .answerBox > div > div:first-child {
    width: 100%;
    height: 100%;
    margin-bottom: 0.25rem;
  }
  
  /* 返回上一层 */
  .backUpper {
    position: absolute;
    top: 0.42rem;
    right: 0.42rem;
    z-index: 1;
    height: 1.25rem;
    line-height: 1.25rem;
    text-align: center;
    background-color: #fea500;
    border-radius: 0.63rem;
    padding: 0 0.42rem;
    font-size: 0.5rem;
  }
  
  /* 弹出框 */
  .model {
    width: 20.83rem;
    height: 20.83rem;
    box-shadow: 0 0 0.42rem rgba(0, 0, 0, 0.4);
    border-radius: 0.33rem;
    padding: 1em;
    padding-top: 0;
    position: fixed;
    z-index: 100;
    background-color: #fff;
    display: none;
    color: #000;
  }
  
  .model .model-header {
    border-bottom: 0.04rem solid #eaeaea;
    height: 2.08rem;
    line-height: 2.08rem;
    text-align: center;
  }
  
  .model .model-header span {
    position: absolute;
    top: 0;
    right: 0.63rem;
    width: 2.08rem;
    height: 2.08rem;
    line-height: 2.08rem;
    text-align: center;
    display: block;
    color: #666;
    cursor: pointer;
    font-size: 1.25rem;
  }
  
  .model .model-header span:hover {
    color: #a30d10;
    background-color: #23b6ff;
    border-radius: 50%;
  }
  
  .mask {
    background-color: #000;
    opacity: 0.7;
    filter: alpha(opacity=30);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    display: none;
  }
  .model .model-body .item > div:nth-child(1) {
    margin-top: 0.67rem;
  }
  .model .model-body .item > div:nth-child(1) > span {
    font-size: 1rem;
    color: #00aaffdc;
  }
  .model .model-body .item > div:nth-child(2),
  .model .model-body .item > div:nth-child(3) {
    display: flex;
    justify-content: space-around;
    margin-top: 0.67rem;
  }
  
  .model .model-body .item > div:nth-child(4) {
    display: flex;
    justify-content: space-evenly;
    margin-top: 0.67rem;
  }
  .model .model-body .item > .item_son > div > div {
    text-align: center;
    margin-top: 0.25rem;
  }
  .model .model-body .item > .item_son > div > div:nth-child(2) {
    color: #00aaffdc;
  }
  .model .model-body .item > div:nth-child(4) > div > div:nth-child(2) {
    font-size: 1rem;
  }
  